import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    TextInput,
    AsyncStorage
} from 'react-native';
import Config from '../../common/Config'
import Utils from '../../common/Utils'
import {Toast,ModalIndicator} from 'teaset';
import {Theme, ListRow, SegmentedView, Label, PullPicker} from 'teaset';
const {height, width} = Dimensions.get('window');
const STORAGE_KEY_TOKEN = '@AsyncStorageDemo:key_token';
export default class AddFriendPage extends Component {
    componentDidMount() {
        this._loadInitialState().done();
    }
    async _loadInitialState(){
        try{
            let value=await AsyncStorage.getItem(STORAGE_KEY_TOKEN);
            if(value!==null){
                this._appendMessage(value);
            }else{
                this._appendMessage('');
            }
        }catch(error){
            this._appendMessage('AsyncStorage错误'+error.message);
        }
    }
    _appendMessage=(message)=>{
        this.setState({
            token:this.state.token.concat(message)
        },()=>this.getInfo());
    };
    getInfo=()=>{
        let params={
            "token":this.state.token,
        };
        ModalIndicator.show("正在请求数据......");
        fetch(Config.baseApi+'/user/getInfo',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: Utils.getParamsString(params)
        })
            .then((response) => response.json())
            .then((responseJson) => {
                ModalIndicator.hide();
                if(responseJson.status===0){
                    if(this.state.token!==''){
                        this.setState({
                            phone:responseJson.data.phone,
                            creditId:responseJson.data.creditId
                        })
                    }else {
                        null
                    }
                }else{
                    Toast.message(responseJson.msg);
                }
            })
            .catch((error) => {
                ModalIndicator.hide();
                Toast.message(error);
            });
    };
    constructor(props) {
        super(props);
        this.state = {
            type: 'projector',
            custom: false,
            activeIndex: 0,
            phone:'',
            creditId:'',
            token:'',
            phoneOrCreditId:''
        }
    };


    renderTitle=(index)=> {
        let titles = ['找人', '找群' ];
        let {custom, activeIndex} = this.state;
        if (!custom) return titles[index];

        return (
            <View key={index} style={{height:33,alignItems: 'center',borderBottomWidth:1,borderColor:'#d6d6d7'}}>
                <Text style={{color: '#000000',fontSize:14}}>{titles[index]}</Text>
                {/*<Label style={{color: tintColor, paddingTop: 4}} text={titles[index]} />*/}
            </View>
        );
    };

    render() {
        let {custom} = this.state;
        return (
            <View style={styles.container}>
                <View style={styles.titleView}>
                    <TouchableOpacity
                        onPress={()=>Actions.pop()}
                        style={styles.goBackView}>
                        <Image
                            source={ImageUtil.GoBack}
                            style={styles.goBackImg}/>
                    </TouchableOpacity>
                    <Text style={styles.titleMsg}>添加好友</Text>
                </View>
                <View style={{height:1,backgroundColor:'#e2e2e3',width:width}}/>
                <View style={{flex:1}}>
                    <SegmentedView
                        style={{flex: 1}}
                        type={this.state.type}
                        indicatorLineColor={custom ? '#5cb85c' : undefined}
                        indicatorLineWidth={custom ? 2 : undefined}
                        indicatorPositionPadding={custom ? 3 : undefined}
                        onChange={index => this.setState({activeIndex: index})}
                    >
                        <SegmentedView.Sheet title={this.renderTitle(0)}>
                            <View style={{flex: 1}}>
                                <TouchableOpacity
                                    onPress={()=>Actions.QueryFriendsPage()}
                                    style={styles.searchView}>
                                    <Image
                                        style={{marginLeft:26,width:15,height:15}}
                                        source={ImageUtil.Search}/>
                                    <Text style={{marginLeft:17,fontSize:14,color:'#b2b2b2'}}>手机号／信用号</Text>
                                    {/*<TextInput*/}
                                        {/*ref={ (ref)=>this.phoneTextInput = ref }*/}
                                        {/*autoCapitalize={"none"}*/}
                                        {/*style={{flex:1,marginLeft:17,fontSize:14}}*/}
                                        {/*keyboardType={"numeric"}*/}
                                        {/*placeholder="请输入手机号/信用号"*/}
                                        {/*placeholderTextColor='#bababa'*/}
                                        {/*autoCorrect={false}*/}
                                        {/*onChangeText={(text)=>{*/}
                                            {/*this.setState({*/}
                                                {/*phoneOrCreditId:text,*/}
                                            {/*})*/}
                                        {/*}}/>*/}
                                </TouchableOpacity>
                                <View style={{flexDirection:'row',alignItems:'center',marginTop:11}}>
                                    <Text style={{marginLeft:30,fontSize:14,color:'#000000'}}>我的手机号：</Text>
                                    <Text style={{fontSize:14,color:'#000000'}}>{this.state.phone}</Text>
                                    <Text style={{marginLeft:33,fontSize:14,color:'#000000'}}>信用号：</Text>
                                    <Text style={{fontSize:14,color:'#000000'}}>{this.state.creditId}</Text>
                                </View>
                            </View>
                        </SegmentedView.Sheet>
                        <SegmentedView.Sheet title={this.renderTitle(1)}>
                            <View style={{flex: 1}}>
                                <TouchableOpacity style={styles.searchView}>
                                    <Image
                                        style={{marginLeft:26,width:15,height:15}}
                                        source={ImageUtil.Search}/>
                                    <Text style={{marginLeft:17,fontSize:14,color:'#b2b2b2'}}>信用号</Text>
                                    {/*<TextInput*/}
                                        {/*ref={ (ref)=>this.phoneTextInput = ref }*/}
                                        {/*autoCapitalize={"none"}*/}
                                        {/*style={{flex:1,marginLeft:17,fontSize:14}}*/}
                                        {/*keyboardType={"numeric"}*/}
                                        {/*placeholder="请输入信用号"*/}
                                        {/*placeholderTextColor='#bababa'*/}
                                        {/*autoCorrect={false}*/}
                                        {/*onChangeText={(text)=>{*/}
                                            {/*this.setState({*/}
                                                {/*phoneOrCreditId:text,*/}
                                            {/*})*/}
                                        {/*}}/>*/}
                                </TouchableOpacity>
                                <View style={{flexDirection:'row',alignItems:'center',marginTop:11}}>
                                    <Text style={{marginLeft:30,fontSize:14,color:'#000000'}}>我的手机号：</Text>
                                    <Text style={{fontSize:14,color:'#000000'}}>{this.state.phone}</Text>
                                    <Text style={{marginLeft:33,fontSize:14,color:'#000000'}}>信用号：</Text>
                                    <Text style={{fontSize:14,color:'#000000'}}>{this.state.creditId}</Text>
                                </View>
                            </View>
                        </SegmentedView.Sheet>
                    </SegmentedView>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#f0f0f0'
    },
    titleView:{
        backgroundColor:'#ffffff',
        width:width,
        alignItems:'center',
        justifyContent:'center'
    },
    titleMsg:{
        textAlign:'center',
        fontSize:20,
        color:'#000000',
        marginTop:34,
        marginBottom:29/2
    },
    goBackView:{
        position: 'absolute',
        left:15,bottom:29/2,
    },
    goBackImg:{
        height:20,
        width:20
    },
    searchView:{
        marginTop:15,
        backgroundColor:'#ffffff',
        height:46,width:width,
        borderColor:'#e3e3e4',
        borderBottomWidth:1,
        borderTopWidth:1,
        alignItems:'center',
        flexDirection:'row'
    }
});
